﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>那些旧照片</title>
    <style type="text/css">
        #main { width:80%; margin:0 auto;}
        .hide { visibility:hidden;}
        .visible {visibility:visible;}
        #cover { background:white; position:absolute;}
        #newcover { background:white; position:absolute;}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
	<script type="text/javascript">
        window.onload = function() {
            var img = document.getElementById("photo");
            var gridWidth = 15;             //配置项，配置小网格宽度
            var height = img.height;
            var width = img.width;
            var cover = document.getElementById("cover");
            var newCover = document.getElementById("newcover");
            cover.style.height = height+"px"; cover.style.width = width+"px";
            newcover.style.height = gridWidth+"px"; newcover.style.width = width+"px";
            img.setAttribute("class", "visible");
            var i = 1; j = 0; 
            var si = setInterval(function(){ 
                    if(gridWidth*i/width >= j) {
                        cover.style.marginTop = gridWidth*(j+1)+"px";
                        newCover.style.marginTop = gridWidth*j+"px";
                        j++;
                    }
                    newCover.style.marginLeft = gridWidth*i%515+"px";
                    i++;
                    if(i > 600) clearInterval(si);
				 }, 100);
		}
	</script>
</head>
<body>	
	<div id="main">
	    <h1 class="hide">一吻足以</h1>
    	<div>
	    	<audio autoplay="autoplay" loop="loop">
		    <source src="huangze.mp3" type="audio/mp3" />
    		Your browser does not support the audio tag.
	    	</audio>
        </div>
        <div>
            <div id="newcover"></div>
            <div id="cover"></div>
            <img id="photo"class="hide" src="love.jpg" height="600" alt="a kiss enough" />
        </div>
</body>
</html>
